<!--
 * @Descripttion: 步骤条工具
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-27 20:37:20
 * @LastEditors: 淏
 * @LastEditTime: 2023-12-11 17:33:50
-->
<template>
  <div style="height: 5%">
    <el-steps :active="active" simple style>
      <el-step title="步骤 1 上传文件" icon=" el-icon-upload"></el-step>
      <el-step title="步骤 2 数据清洗" icon="el-icon-edit"></el-step>
      <el-step
        title="步骤 3 数据入库"
        icon="el-icon-circle-plus-outline"
      ></el-step>
    </el-steps>
  </div>
</template>

<script>
  export default {
    // 组件名称
    name: 'stepsPage',
    // 组件参数 接收来自父组件的数据
    props: {
      active: {
        type: Number,
        required: true,
      },
    },
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
      return {}
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {},
    created() {},
    mounted() {},
  }
</script>

<style scoped>
  .button {
    margin-top: 13px;
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
</style>
<style lang="less" scoped>
  /deep/.el-steps--simple {
    background: #00ffff70;
  }
  /deep/.el-step__head.is-finish {
    color: #00ffff !important;
  }
  /deep/.el-step__title.is-finish {
    color: #00ffff !important;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  /deep/.el-step__title.is-process {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/.el-step__head.is-process {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/ .el-step__head.is-wait {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/ .el-step__title.is-wait {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
</style>
